<template>
  <div>
    <el-tabs value="first">
      <el-tab-pane label="个人信息" name="first" style="width: 30%">
        <el-form :model="form" label-width="80px">
          <el-form-item label="审核状态">
            <span v-if="form.status != 1" style="color: red">未审核</span>
            <span v-else style="color: blue">审核通过</span>
          </el-form-item>
          <el-form-item label="营业期限">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.businessTerm"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="商户名字">
            <el-input v-model="form.merchantName"></el-input>
          </el-form-item>
          <el-form-item label="企业编号">
            <el-input v-model="form.merchantId"></el-input>
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input v-model="form.contacts"></el-input>
          </el-form-item>
          <el-form-item label="商户地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="联系人电话">
            <el-input v-model="form.contactPhone"></el-input>
          </el-form-item>
          <el-form-item label="特色">
            <el-input v-model="form.characteristic"></el-input>
          </el-form-item>
          <el-form-item label="经营类目">
            <el-select v-model="form.merchantType" placeholder="请选择经营类目">
              <el-option label="石油" value="石油"></el-option>
              <el-option label="汽油" value="汽油"></el-option>
              <el-option label="天然气" value="天然气"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="tijiao()">确认提交</el-button>
            <el-button @click="congz()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        <el-form
          ref="formRef"
          :model="ruleForm"
          status-icon
          label-width="100px"
          class="demo-ruleForm"
          style="width: 500px"
          :rules="rulesPwd"
        >
          <el-form-item label="账号">
            <el-input
              v-model="ruleForm.phone"
              :disabled="zhao"
              style="width: 80%"
            ></el-input>
            <el-button type="primary" @click="huan()" style="width: 20%"
              >更换账号</el-button
            >
          </el-form-item>
          <el-form-item label="旧密码" prop="jiupassword">
            <el-input v-model="ruleForm.jiupassword" show-password></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newpassword">
            <el-input v-model="ruleForm.newpassword" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="newpassword0">
            <el-input v-model="ruleForm.newpassword0" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatePwd">提交</el-button>
            <el-button @click="cz">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">立即创建</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script setup>
import { ref, reactive, onMounted } from "vue";
import mimajs from "@/api/merchant/mima";
import { useTokenStore } from "@/stores/token";
import { xiugaishanghu } from "@/api/user";
import { ElMessage } from "element-plus";
//商户信息
const form = ref({});
//商户信息修改
const tijiao = async () => {
  let data = await mimajs.merchanxq(form);
  if (data.flag) {
    ElMessage.success("提交成功");
    useTokenStore().setToken(form)
  } else {
    ElMessage.success("提交失败");
  }
};
//重置商户信息
import merchantjs from "@/api/merchant/merchant";
//获取商户资料
const gerenxx = async (id) => {
  let data = await merchantjs.selectByOne(id);
  form.value = data.shuju;
  //存放到缓存
  useTokenStore().setToken(geren.value);
  // console.log(useTokenStore().token);
};
const congz=()=>{
    gerenxx(localStorage.getItem("uid"))
}
//账号表单
const ruleForm = ref({});
// 获取账号表单
const user = async (id) => {
  let date = await mimajs.userxq(id);
  ruleForm.value = date.shuju;
};
//账户更换
const zhao = ref("false");
const huan = () => {
  if (zhao.value) {
    zhao.value = false;
  } else {
    zhao.value = true;
  }
};
//重置
const cz = () => {
  user(yonghu.userId);
};
//缓存
const yonghu=useTokenStore().token
//钩子
onMounted(() => {
  user(yonghu.userId);
  form.value = yonghu;
});
// 验证旧密码是否和登录成功的密码一致
const xx = (rule, value, callback) => {
  useTokenStore().token.removeToken;
  if (value != ruleForm.value.password) {
    return callback(new Error("密码输入有误"));
  } else {
    callback();
  }
};

// 确认密码和新密码是否一致
const yy = (rule, value, callback) => {
  if (value != ruleForm.value.newpassword) {
    return callback(new Error("两次密码输入不一致"));
  } else {
    callback();
  }
};

const rulesPwd = {
  jiupassword: [
    // blur失去焦点    focus 获得焦点
    { required: true, message: "请输入旧密码", trigger: "blur" },
    { min: 3, max: 10, message: "密码必须为3~10位的非空字符", trigger: "blur" },
    // 我们要判断输入的旧密码是否正确 咱们要和token中的密码比较
    { validator: xx, trigger: "blur" },
  ],
  newpassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    {
      min: 6,
      max: 10,
      message: "新密码必须为6~10位的非空字符",
      trigger: "blur",
    },
  ],
  newpassword0: [
    { required: true, message: "请输入确认密码", trigger: "blur" },
    {
      min: 6,
      max: 10,
      message: "确认密码必须为6~10位的非空字符",
      trigger: "blur",
    },
    { validator: yy, trigger: "blur" },
  ],
};
const formRef = ref(null); // 强制校验使用
// 点击提交按钮
const updatePwd = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      xiugaimi();
    } else {
      alert("校验失败");
    }
  });
};
//保存的方法
const xiugaimi = async () => {
  ruleForm.value.password = ruleForm.value.newpassword0; //把值给到表单的方法中
  console.log(ruleForm);
  let mi = await xiugaishanghu(ruleForm);
  if (mi.flag) {
    ElMessage.success("修改成功,请重新登陆");
    // router.push("/")
  }
};
</script>


<style lang='scss' scoped>
</style>